<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .outter {
            width: 520px;
            height: 280px;
            overflow: hidden;
        }

        .inner {
            width: 2600px;
            height: 280px;
            position: relative;
            left: 0;
        }
        .inner::after {
            content: '';
            display: block;
            clear: both;
        }
        .img-1 {
            display: block;
            float: left;
        }
        .list {
            width: 520px;
            height: 80px;
            position: relative;
            top: -40px;
        }
        .item {
            float: left;
            border: 1px solid #999;
            margin-left: 10px;
            font-size: 16px;
            padding: 5px 10px;
            background-color: #56a5f1;
            color: whitesmoke;
        }
        .item.active { 
            /* 激活的效果 图片和页码对应时 就激活 */
            border: 1px solid white;
            box-shadow: 5px 0 5px #999;
        }
    </style>
</head>

<body>
    <!-- 总共需要两个容器，
        inner容器中有5张图，宽度5张图，移动时是由inner带动5张图一起移动，这些图片横向排列在inner中
        outter容器在inner的外面，宽度是一张图的宽度，多出的图不可见
     -->
    <div class="outter">
        <div class="inner">
            <img class="img-1" src="./image/0.jpg" alt="">
            <img class="img-1" src="./image/1.jpg" alt="">
            <img class="img-1" src="./image/2.jpg" alt="">
            <img class="img-1" src="./image/3.jpg" alt="">
            <img class="img-1" src="./image/4.jpg" alt="">
        </div>
        <div class="list">
            <div class="item active">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
        </div>
    </div>

    <script>
        var items = document.querySelectorAll('.item'); // 表示序号的小图标
        var inner = document.querySelector('.inner'); // 要移动的元素
        var leftDe = 0;
        var imgNum = 5; // 图片的数量
        var moveNum = 0 // 移动的次数
        var distance = 520; // 每次移动的距离，也就是图片的宽度
        setInterval(function() {
            items[moveNum].className = 'item'
            if(moveNum<imgNum-1) {
                moveNum ++;
                // active这个class要向后传递 当前的item要删掉这个class
                items[moveNum].className = 'item active'
            }else {
                inner.style.left = 0;
                items[0].className = 'item active'
                moveNum = 0; // 移动到最后一张时  需要归零
            }
            // 挪动图片所在的div
            // substring 截取字符串 两个参数 第一个是开始截取的位置 第二个是结束位置
            // indexOf 获取字符串中某个元素的位置
            var pos = 0;  // 每一小步移动的距离
            // inner.style.left = -(distance*moveNum)+'px';
            var timer = setInterval(function() {
                var nowPos = Math.abs(inner.style.left.substring(0, inner.style.left.indexOf('px')))
                if(nowPos < distance*moveNum) { // 每移动一小步 判断有没有到位
                    pos = nowPos+20;  // 每次移动20像素
                    inner.style.left = -(pos)+'px'; // 挪动一小步
                }else {
                    clearInterval(setInterval) // 挪动到位之后，清楚内层定时器，不再移动小碎步
                }
            }, 15) // 15毫秒移动一次,每次移动20像素
        }, 2000); // 2秒之后 会再次移动 生成新的内层定时器 移动小碎步
    </script>
</body>

</html>